﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/TLFLayout.Master" AutoEventWireup="true" CodeBehind="tableDemo.aspx.cs" Inherits="HRTemplate.tableDemo" %>

<%@ Register Src="~/userControls/leftNav.ascx" TagPrefix="uc1" TagName="leftNav" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderTop" runat="server">
    <script>
        $(function () {
            setTab("办事大厅", "表格页");
        });

    </script>
    <script type="text/javascript">
        window.onload = function showAltrow() {
            var tablename = document.getElementById("table_Demo");
            var trl = tablename.getElementsByTagName("tr");
            for (var i = 0; i <= trl.length; i++) {
                trl[i].onmouseover = function () {
                    this.style.backgroundColor = "#f2f2f2";
                    this.style.cursor = "pointer";
                }
                trl[i].onmouseout = function () {
                    // this.style.backgroundColor = (this.sectionRowIndex % 2 == 0) ? "#dfedf1" : "#fff";
                    this.style.backgroundColor = "#fff";
                }
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderLeft" runat="server">
    <uc1:leftNav runat="server" ID="leftNav" />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolderSecondNavigation" runat="server">
    <a href="#">办事大厅</a> > 公共页面类 > 表格页 >
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolderRight" runat="server">
    <h3>表格Demo</h3>
    <div class="tableoperation">  <a href="javascript:void(0);" id="advanceFilter" class="advanceSearchButton" onfocus="this.blur();" onclick="javascript:searchSwitch('filterContent');">高级查询</a>
        <asp:Button ID="Button3" runat="server" Text="操作按钮" CssClass="btn-common" />
        <asp:Button ID="Button1" runat="server" Text="操作按钮" CssClass="btn-common" />
        <asp:Button ID="Button2" runat="server" Text="操作按钮" CssClass="btn-common" />
        <asp:Button ID="Button4" runat="server" Text="操作按钮" CssClass="btn-common" />
        <a href="#">操作链接</a>  
         <input id="test" name="text" type="text" class="searchInput"/>
        <img src="../resource/image/search.png" /> 
           
    </div>
    <div id="filterContent" class="filterContent">
        <table class="noborderTable">
       
        <tr>
            <td>事业群：</td>
            <td>
                <input id="testNotNull1" name="text" type="text"  ></td>
            <td >中心：</td>
            <td>
                <input id="testNotNull2" name="text" type="text"  /></td>
            <td >小组：</td>
            <td>
                <input id="Text1" name="text" type="text"  /></td>
        </tr> 
        <tr>

            <td >输入查询：</td>
            <td>
                <input name="text" type="text" /></td>
            <td >输入查询：</td>
            <td>
                <input id="Text2" name="text" type="text"  /></td>
            <td >下拉列表：</td>
            <td>
                <select name="select">
                    <option>- 请选择 -</option>
                    <option>列表选项1</option>
                    <option>列表选项2</option>
                    <option>列表选项3</option>
                </select>
            </td>
        </tr>
        <tr>
           
            <td >输入查询：</td>
            <td>
                <input name="text" type="text" /></td> 
             <td >复选查询：</td>
            <td colspan="3" >
                <input name="checkbox" type="checkbox" />
                <label>全选</label>
                <input name="checkbox" type="checkbox" checked="checked" />
                <label>复选1</label>
                <input name="checkbox" type="checkbox" />
                <label>复选2</label>
            </td>
        </tr>  
    </table>
    </div>
    <table class="listTable" id="table_Demo">
        <tr>
            <th scope="col" style="width: 30px;">序号</th>
            <th scope="col"><span>单号</span> </th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$m$ucHols$og','Sort$AbnormalTypeName')">假期类型</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$m$ucHols$og','Sort$StartDate')">开始时间</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$m$ucHols$og','Sort$EndDate')">结束时间</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$m$ucHols$og','Sort$HolsDayCount')">天数</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$m$ucHols$og','Sort$ApplyTime')">申请时间</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$m$ucHols$og','Sort$ApplyTime')">知会人</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$m$ucHols$og','Sort$FinishTypeName')">结束类型</a></th>
            <th scope="col"><span>查看</span> </th>
        </tr>
        <tr itemid="998287">
            <td align="center">1</td>
            <td title="000009982870000000000000000000">000009982870000000000000000000</td>
            <td style="">事假</td>
            <td>2012-09-27</td>
            <td>2012-09-27</td>
            <td>1.0</td>
            <td>2012-09-26</td>
            <td title="bencochen, timtian">bencochen, timtian</td>
            <td>正常结束</td>
            <td>

                <a href="/holiday/Evaluate/HDEvaluateMain.aspx?atype=5&instanceid=998287" target="_blank" title="查看" onclick="javascript:try{SetBeginTicksByUrl(this.href);}catch(err){};">查看</a>
            </td>
        </tr>
        <tr class="altrow" itemid="971094">
            <td align="center">2</td>
            <td title="000009710940000000000000000000">000009710940000000000000000000</td>
            <td>事假</td>
            <td>2012-09-19</td>
            <td>2012-09-21</td>
            <td>3.0</td>
            <td>2012-09-12</td>
            <td title="bencochen, timtian">bencochen, timtian</td>
            <td>正常结束</td>
            <td>

                <a href="/holiday/Evaluate/HDEvaluateMain.aspx?atype=5&instanceid=971094" target="_blank" title="查看" onclick="javascript:try{SetBeginTicksByUrl(this.href);}catch(err){};">查看</a>
            </td>
        </tr>
        <tr itemid="912786">
            <td align="center">3</td>
            <td title="000009127860000000000000000000">000009127860000000000000000000</td>
            <td>事假</td>
            <td>2012-08-13</td>
            <td>2012-08-15</td>
            <td>3.0</td>
            <td>2012-08-09</td>
            <td title="bencochen, timtian">bencochen, timtian</td>
            <td>取消假期</td>
            <td>

                <a href="/holiday/Evaluate/HDEvaluateMain.aspx?atype=5&instanceid=912786" target="_blank" title="查看" onclick="javascript:try{SetBeginTicksByUrl(this.href);}catch(err){};">查看</a>
            </td>
        </tr>
        <tr class="altrow" itemid="611083">
            <td align="center">4</td>
            <td title="000006110830000000000000000000">000006110830000000000000000000</td>
            <td>未出勤</td>
            <td>2012-01-20</td>
            <td>2012-01-20</td>
            <td>1.0</td>
            <td>2012-01-17</td>
            <td title="bencochen, timtian">bencochen, timtian</td>
            <td>正常结束</td>
            <td>

                <a href="/holiday/Evaluate/HDEvaluateMain.aspx?atype=5&instanceid=611083" target="_blank" title="查看" onclick="javascript:try{SetBeginTicksByUrl(this.href);}catch(err){};">查看</a>
            </td>
        </tr>
        <tr itemid="512215">
            <td align="center">5</td>
            <td title="000005122150000000000000000000">000005122150000000000000000000</td>
            <td>未出勤</td>
            <td>2011-11-03</td>
            <td>2011-11-03</td>
            <td>1.0</td>
            <td>2011-11-07</td>
            <td title="bencochen, timtian">bencochen, timtian</td>
            <td>正常结束</td>
            <td>

                <a href="/holiday/Evaluate/HDEvaluateMain.aspx?atype=5&instanceid=512215" target="_blank" title="查看" onclick="javascript:try{SetBeginTicksByUrl(this.href);}catch(err){};">查看</a>
            </td>
        </tr>
        <tr class="altrow" itemid="488956">
            <td align="center">6</td>
            <td title="000004889560000000000000000000">000004889560000000000000000000</td>
            <td>未出勤</td>
            <td>2011-10-19</td>
            <td>2011-10-21</td>
            <td>3.0</td>
            <td>2011-10-18</td>
            <td title="bencochen, timtian">bencochen, timtian</td>
            <td>正常结束</td>
            <td>

                <a href="/holiday/Evaluate/HDEvaluateMain.aspx?atype=5&instanceid=488956" target="_blank" title="查看" onclick="javascript:try{SetBeginTicksByUrl(this.href);}catch(err){};">查看</a>
            </td>
        </tr>
    </table>
    <div class='oagrid_pagenav'><span class='oagrid_pagenav_recordcnt'>共<strong>6</strong>行</span> <a href="javascript:alert('已经是第一页了');" class="oagrid_pagenav_pagelink">&lt;</a><span class="oagrid_pagenav_selectedpagenumber">1</span><a href="javascript:__doPostBack('ctl00$m$ucHols$og','GotoIndex,1')" class="oagrid_pagenav_pagelink">2</a><a href="javascript:__doPostBack('ctl00$m$ucHols$og','GotoIndex,2')" class="oagrid_pagenav_pagelink">3</a><a href="javascript:__doPostBack('ctl00$m$ucHols$og','GotoIndex,3')" class="oagrid_pagenav_pagelink">4</a><a href="javascript:__doPostBack('ctl00$m$ucHols$og','GotoIndex,4')" class="oagrid_pagenav_pagelink">...</a><a href="javascript:__doPostBack('ctl00$m$ucHols$og','GotoIndex,5')" class="oagrid_pagenav_pagelink">12</a><a href="javascript:__doPostBack('ctl00$m$ucHols$og','GotoNext')" class="oagrid_pagenav_pagelink">&gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;每页显示<input id="txtChangePageSize" value="1" type="text" name="ctl00_m_ucHols_og_PageSize" class="oagrid_pagenav_pagesize" isfire="false" onchange="this.isFire='true';javascript:__doPostBack('ctl00$m$ucHols$og','ChangePageSize,' + this.value)" onkeypress="if (event.keyCode == 13) {event.keyCode = 9;this.isFire='true';javascript:__doPostBack('ctl00$m$ucHols$og','ChangePageSize,' + this.value)}" language="javascript" />&nbsp;行</div>
    <h4>交互说明</h4>
    <ul>
        <li>表头th不能折行</li>
        <li>单元格的宽度不能太宽，如超出宽度的以 ... 显示，并且设置鼠标滑过时tip显示全部数据</li>
        <li>表头有排序功能的，需要有三角形标志，如果没有按该列排序，这三角形标志默认为灰色</li>
    </ul>
</asp:Content>
